<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	#jd{
		width: 608px;
		height: 149px;
		border: 1px solid blue;
		margin: 10px auto;
		position: relative;
		overflow: hidden;
	}
	#jd .big{
		width: 3654px;
		height: 149px;
		/*border: 1px solid orange;*/
		position: absolute;
		left: 0;
		top: 0;
	}
	#jd .big img{
		float: left;
		border-right: 1px solid #eee;
	}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	
$(function(){

	var c = 0;

	// 左按钮事件
	$('#btnl').click(function() {
		c++;
		c = (c==1)?-5:c;
		// 计算left
		var l = c*609;
		// 让大div移动
		$('#jd .big').stop().animate({'left':l+"px"}, 400);
	});

	// 右按钮

	$('#btnr').click(function() {
		c--;
		c = (c==-6)?0:c;

		// 计算left
		var l = c*609;
		// 让大div移动
		$('#jd .big').stop().animate({'left':l+"px"}, 400);
	});
	
})


</script>
</head>

<body>


<input type="button" value="左按钮" id="btnl" class="cur_l" />
<input type="button" value="右按钮" id="btnr" class="cur_r" />

<div id="jd">
	<div class="big">
		<!-- img[src=images/$.jpg]*18 -->
		<img src="images/1.jpg" alt="" />
		<img src="images/2.jpg" alt="" />
		<img src="images/3.jpg" alt="" />
		<img src="images/4.jpg" alt="" />
		<img src="images/5.jpg" alt="" />
		<img src="images/6.jpg" alt="" />
		<img src="images/7.jpg" alt="" />
		<img src="images/8.jpg" alt="" />
		<img src="images/9.jpg" alt="" />
		<img src="images/10.jpg" alt="" />
		<img src="images/11.jpg" alt="" />
		<img src="images/12.jpg" alt="" />
		<img src="images/13.jpg" alt="" />
		<img src="images/14.jpg" alt="" />
		<img src="images/15.jpg" alt="" />
		<img src="images/16.jpg" alt="" />
		<img src="images/17.jpg" alt="" />
		<img src="images/18.jpg" alt="" />
	</div>
</div>

</body>
</html>
